<!--
 * @Author: Cenven
 * @Date: 2021-05-18 09:59:09
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-08-23 10:11:56
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
    <div class='page-mobile-custom-form' :style="customForm.dataJson && customForm.dataJson.config.customStyle">
        <white-header
        :isShowTopNav="true"
        :isShowBack="true"
        :isShowRight="true"
        :title="customForm.name"
        ></white-header>
        <div class="form_wrapper" v-if="!successBox" :style="{backgroundImage: bgImage ? 'url('+bgImage+')' : 'url()' }">
            <div class="form_name">{{customForm.name}}</div>
            <div class="form_describe">{{customForm.describe}}</div>
            <div class="form_content" v-if="customForm.dataJson">
                <!-- 水平表单 -->
                <div class="horizontal" v-if="customForm.dataJson.config.layout === 'horizontal'">
                    <div class="horizontal_form_item" v-for="(item,index) in dataJson" :key="item.key" :ref="item.key">
                        <div class="form_item_box">
                            <p v-if="item.type != 'alert' && item.type != 'text' && item.type != 'button'">{{item.label}}：<span class="require_tips" v-show="item.rules && item.rules[0].required">*</span></p>
                            <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'input'">
                                <span v-if="item.options.addonBefore">{{item.options.addonBefore}}</span>
                                <input :type="item.options.type" :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                                <span v-if="item.options.addonAfter">{{item.options.addonAfter}}</span>
                            </div>
                            <div :class="['textarea_item']" v-if="item.type == 'textarea'">
                                <textarea  rows="3" cols="20" :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" class="textarea_box" :style="{width:item.options.width ? item.options.width : 'initial'}"></textarea>
                            </div>
                            <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'number'">
                                <span v-if="item.options.addonBefore">{{item.options.addonBefore}}</span>
                                <input oninput="value=value.replace(/[^\d]/g,'')" :type="item.options.type" :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                                <span v-if="item.options.addonAfter">{{item.options.addonAfter}}</span>
                            </div>
                            <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'select'" @click="showPicker(item.model,'select')">
                                <input disabled :name="item.key" :value="formatValue(item.options.options,form[item.model])" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                                <van-icon name="arrow-down" class="arrow-down" />
                            </div>
                            <div class="checkbox_item" v-if="item.type == 'checkbox'" @click="randerForm">
                                <van-checkbox-group v-model="form[item.model]">
                                    <van-checkbox :name="checkboxItem.value" shape="square" v-for="(checkboxItem,checkboxIndex) in item.options.options" :key="checkboxIndex">{{checkboxItem.label}}</van-checkbox>
                                </van-checkbox-group>
                            </div>
                            <div class="radio_item" v-if="item.type == 'radio'" @click="randerForm">
                                <van-radio-group v-model="form[item.model]">
                                    <van-radio :name="radioItem.value" v-for="(radioItem,radioIndex) in item.options.options" :key="radioIndex">{{radioItem.label}}</van-radio>
                                </van-radio-group>
                            </div>
                            <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'date'" @click="showPicker(item.model,'date')">
                                <input disabled :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                                <van-icon name="arrow-down" class="arrow-down" />
                            </div>
                            <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'time'" @click="showPicker(item.model,'time')">
                                <input disabled :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                                <van-icon name="arrow-down" class="arrow-down" />
                            </div>
                            <div :class="['switch_item']" v-if="item.type == 'switch'">
                                <van-switch v-model="form[item.model]" active-value="1" inactive-value="0"  @input="onchange(item.model,$event)"/>
                            </div>
                        </div>
                        <div :class="['alert_item',item.options.type ? item.options.type : '']" v-if="item.type == 'alert'">
                            {{item.label}}
                        </div>
                        <div :class="['text_item']" :style="item.options" v-if="item.type == 'text'">
                            {{item.label}}
                        </div>
                        <div :class="['button_item',item.options.type ? item.options.type : '']" v-if="item.type == 'button'" @click="submitForm(item.options.handle)">
                            {{item.label}}
                        </div>
                        <div class="validator_info" :id="item.model" v-if="item.type != 'alert' && item.type != 'text' && item.type != 'button'">验证提示信息</div>
                    </div>
                </div>
                <!-- 垂直表单 -->
                <div class="vertical" v-else>
                    <div class="vertical_form_item" v-for="(item,index) in dataJson" :key="item.key" :ref="item.key">
                        <p v-if="item.type != 'alert' && item.type != 'text' && item.type != 'button'">{{item.itemIndex}}.{{item.label}}：<span class="require_tips" v-show="item.rules && item.rules[0].required">*</span></p>
                        <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'input'">
                            <span v-if="item.options.addonBefore">{{item.options.addonBefore}}</span>
                            <input :type="item.options.type" :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                            <span v-if="item.options.addonAfter">{{item.options.addonAfter}}</span>
                        </div>
                        <div :class="['textarea_item']" v-if="item.type == 'textarea'">
                            <textarea  rows="3" cols="20" :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" class="textarea_box" :style="{width:item.options.width ? item.options.width : 'initial'}"></textarea>
                        </div>
                        <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'number'">
                            <span v-if="item.options.addonBefore">{{item.options.addonBefore}}</span>
                            <input oninput="value=value.replace(/[^\d]/g,'')" :type="item.options.type" :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                            <span v-if="item.options.addonAfter">{{item.options.addonAfter}}</span>
                        </div>
                        <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'select'" @click="showPicker(item.model,'select')">
                            <input disabled :name="item.key" :value="formatValue(item.options.options,form[item.model])" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                            <van-icon name="arrow-down" class="arrow-down" />
                        </div>
                        <div class="checkbox_item" v-if="item.type == 'checkbox'" @click="randerForm">
                            <van-checkbox-group v-model="form[item.model]">
                                <van-checkbox :name="checkboxItem.value" shape="square" v-for="(checkboxItem,checkboxIndex) in item.options.options" :key="checkboxIndex">{{checkboxItem.label}}</van-checkbox>
                            </van-checkbox-group>
                        </div>
                        <div class="radio_item" v-if="item.type == 'radio'" @click="randerForm">
                            <van-radio-group v-model="form[item.model]">
                                <van-radio :name="radioItem.value" v-for="(radioItem,radioIndex) in item.options.options" :key="radioIndex">{{radioItem.label}}</van-radio>
                            </van-radio-group>
                        </div>
                        <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'date'" @click="showPicker(item.model,'date')">
                            <input disabled :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                            <van-icon name="arrow-down" class="arrow-down" />
                        </div>
                        <div :class="['input_item',!item.options.addonBefore && !item.options.addonAfter ? 'before_span after_span':'']" v-if="item.type == 'time'" @click="showPicker(item.model,'time')">
                            <input disabled :name="item.key" v-model="form[item.model]" :placeholder="item.options.placeholder" :class="['input_box',item.options.addonBefore || item.options.addonAfter ? 'padding_box':'']" :style="{width:item.options.width ? item.options.width : 'initial'}">
                            <van-icon name="arrow-down" class="arrow-down" />
                        </div>
                        <div :class="['switch_item']" v-if="item.type == 'switch'">
                            <van-switch v-model="form[item.model]" active-value="1" inactive-value="0"  @input="onchange(item.model,$event)"/>
                        </div>
                        <div :class="['alert_item',item.options.type ? item.options.type : '']" v-if="item.type == 'alert'">
                            {{item.label}}
                        </div>
                        <div :class="['text_item']" :style="item.options" v-if="item.type == 'text'">
                            {{item.label}}
                        </div>
                        <div :class="['button_item',item.options.type ? item.options.type : '']" v-if="item.type == 'button'" @click="submitForm(item.options.handle)">
                            {{item.label}}
                        </div>
                        <div class="validator_info" :id="item.model" v-if="item.type != 'alert' && item.type != 'text' && item.type != 'button'">验证提示信息</div>
                    </div>
                </div>
            </div>
            <div class="form_empty" v-else>
                <van-empty description="填写内容为空哟~" />
            </div>
        </div>
        <div class="success_box" v-else>
            <van-icon class="icon_success" size="2rem" name="checked" color="var(--theme-color)" />
            <p>提交成功！</p>
        </div>
        <van-popup v-model="isShowPicker" position="bottom">
            <van-picker
                title="标题"
                show-toolbar
                :columns="pickerOption"
                value-key="label"
                @confirm="onConfirm"
                @cancel="isShowPicker = false"
            />
        </van-popup>
        <van-popup v-model="isShowDatePicker" position="bottom">
            <van-datetime-picker
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirmDatePicker"
                @cancel="isShowDatePicker = false"
            />
        </van-popup>
        <van-popup v-model="isShowTimePicker" position="bottom">
            <van-datetime-picker
                type="time"
                title="选择时间"
                :min-hour="0"
                :max-hour="23"
                @confirm="onConfirmTimePicker"
                @cancel="isShowTimePicker = false"
            />
        </van-popup>
    </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getCustomFormById, saveCustomFormResult } from "~/api/custom-form";
export default {
    name:"custom-form",
    components: {
        WhiteHeader
    },
    data(){
        return {
            customForm:{},
            dataJson:[],
            form:{},
            isShowPicker:false,
            pickerOption:[],

            isShowDatePicker:false,
            minDate: new Date(1970, 0, 2),
            maxDate: new Date(),
            currentDate: new Date(),
            tempModel:null,

            isShowTimePicker:false,

            successBox:false,
            bgImage:"",
        }
    },
    computed: {
        ...mapState({
            web_info(state) {
                return state.web_info;
            },
            kl_md(state) {
                return state.kl_md;
            },
        }),
        formId() {
            return this.$route.query.formId;
        },
    },
    watch:{
        form: {
            handler(newValue, oldValue) {
                console.log(newValue)
            },
            deep: true
        }
    },
    created(){
        // this.initPages();
    },
    activated(){
        this.initPages();
        if (document.body.scrollTop!=0) {
            document.body.scrollTop = 0;
        }else {
            document.documentElement.scrollTop = 0;
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.form = {...this.form};
        })
    },
    methods:{
        ...mapMutations([
            "SET_IS_LOADING",
        ]),
        randerForm(){
            this.form = {...this.form};
        },
        async submitForm(type){
            if(type == 'submit'){
                let formKeys = Object.keys(this.form);
                for (let i = 0; i < formKeys.length; i++) {
                    let formItemObj = this.dataJson.find(dataItem=>{
                        return dataItem.model == formKeys[i];
                    })
                    if(formItemObj && formItemObj.rules){
                        for (let j = 0; j < formItemObj.rules.length; j++) {
                            let dom = document.getElementById(formKeys[i]);
                            // 验证是否必填
                            if(j === 0 && formItemObj.rules[j] && formItemObj.rules[j].required){
                                if(!this.form[formKeys[i]]){
                                    // 验证失败
                                    let current_top = this.$refs[formKeys[i]][0].offsetTop;
                                    document.body.scrollTop = document.documentElement.scrollTop = current_top - 42;
                                    dom.innerHTML = formItemObj.rules[j].message;
                                    dom.style.display = 'block';
                                    return;
                                }else{
                                    dom.style.display = 'none';
                                }
                            }else{
                                // 验证正则
                                const pattern = eval(formItemObj.rules[j].pattern);
                                if (pattern && !(pattern.test(this.form[formKeys[i]]))) {
                                    // 验证失败
                                    let current_top = this.$refs[formKeys[i]][0].offsetTop;
                                    document.body.scrollTop = document.documentElement.scrollTop = current_top - 42;
                                    dom.innerHTML = formItemObj.rules[j].message;
                                    dom.style.display = 'block';
                                    return;
                                }else{
                                    dom.style.display = 'none';
                                }
                            }
                        }
                        
                    }
                }
                console.log("全部验证通过");
                let params = {
                    formId:this.formId,
                    dataJson:JSON.stringify(this.form)
                }
                console.log(params);
                this.SET_IS_LOADING(true);
                let result = await saveCustomFormResult(params);
                if (result && result.data && result.data.code == 200) {
                    this.successBox = true;
                } else {
                    this.$toast("网络波动，请稍后重新进入！");
                }
                this.SET_IS_LOADING(false);
                
            }
        },
        onchange(model,checked) {
            console.log(model,checked);
            if(checked == '1'){
                this.form = {
                    ...this.form,
                    [model]:'1'
                }
            }else{
                this.form = {
                    ...this.form,
                    [model]:'0'
                }
            }
        },
        onConfirmTimePicker(time){
            this.form = {
                ...this.form,
                [this.tempModel]:time+':00'
            }
            this.isShowTimePicker = false;
        },
        onConfirmDatePicker(time){
            this.form = {
                ...this.form,
                [this.tempModel]:this.parseTime(time,'{y}-{m}-{d}')
            }
            this.isShowDatePicker = false;
        },
        formatValue(option,value){
            if(!value){
                return ""
            }
            let obj = option.find(item=>item.value == value);
            if(obj){
                return obj.label;
            }else{
                return ""
            }
        },
        onConfirm(value, index) {
            // console.log(value, index);
            this.form = {
                ...this.form,
                [value.model]:value.value
            }
            this.isShowPicker = false;
        },
        showPicker(model,type){
            if(type === 'select'){
                let obj = this.dataJson.find(item=>{
                    return item.model == model
                });
                if(obj && obj.options && obj.options.options){
                    this.pickerOption = obj.options.options.map(item=>{
                        return {
                            ...item,
                            model:model
                        }
                    });
                    this.isShowPicker = true;
                }else{
                    this.pickerOption = [];
                    this.isShowPicker = true;
                }
            }else if(type === 'date'){
                this.tempModel = model;
                this.isShowDatePicker = true;
            }else if(type === 'time'){
                this.tempModel = model;
                this.isShowTimePicker = true;
            }
            
        },
        initPages(){
            this.getCustomForm();
        },
        async getCustomForm(){
            this.SET_IS_LOADING(true);
            let result = await getCustomFormById(this.formId);
            if (result && result.data && result.data.code == 200) {
                if(result.data.data){
                    const { dataJson } = result.data.data;
                    let json = dataJson ? JSON.parse(dataJson) : {};
                    if(json && json.config && json.config.bgImageUrl){
                        this.bgImage = json.config.bgImageUrl;
                    }
                    this.customForm = {
                        ...result.data.data,
                        dataJson:JSON.parse(dataJson)
                    }
                    if(dataJson){
                        let index = 0;
                        this.dataJson = JSON.parse(dataJson).list.map((item,i)=>{
                            if(item.type != 'alert' && item.type != 'text' && item.type != 'button'){
                                index++;
                            }
                            return {
                                ...item,
                                itemIndex : index
                            }
                            
                        });
                        this.dataJson.map((item,i)=>{
                            if(item.type != 'alert' && item.type != 'text' && item.type != 'button'){
                                if(item.options.defaultValue){
                                    this.form[item.model] = item.options.defaultValue;
                                }else{
                                    if(item.type == 'switch'){
                                        this.form[item.model] = "0";
                                    }else{
                                        this.form[item.model] = undefined;
                                    }
                                }
                                
                            }
                        });
                    }
                }
            } else {
                this.$toast("网络波动，请稍后重新进入！");
            }
            this.SET_IS_LOADING(false);
        },
        parseTime(time, pattern) {
            if (arguments.length === 0 || !time) {
                return null
            }
            const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
            let date
            if (typeof time === 'object') {
                date = time
            } else {
                if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                    time = parseInt(time)
                } else if (typeof time === 'string') {
                    time = time.replace(new RegExp(/-/gm), '/');
                }
                if ((typeof time === 'number') && (time.toString().length === 10)) {
                    time = time * 1000
                }
                date = new Date(time)
            }
            const formatObj = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
                h: date.getHours(),
                i: date.getMinutes(),
                s: date.getSeconds(),
                a: date.getDay()
            }
            const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                let value = formatObj[key]
                // Note: getDay() returns 0 on Sunday
                if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
                if (result.length > 0 && value < 10) {
                    value = '0' + value
                }
                return value || 0
            })
            return time_str
        },
    }
}
</script>
<style lang='scss'>
.page-mobile-custom-form{
    // .van-checkbox-group{
    //     overflow: hidden;
    //     .van-checkbox{
    //         float: left;
    //         margin-left: .4rem;
    //         margin-bottom: .2rem;
    //         &:first-child{
    //             margin-left: 0;
    //         }
    //     }
    // }
    .van-checkbox-group{
        .van-checkbox{
            margin-bottom: .3rem;
        }
    }
    .van-radio-group{
        .van-radio{
            margin-bottom: .3rem;
        }
    }
   
}
</style>
<style lang='scss' scoped>
.page-mobile-custom-form{
    width: 7.2rem;
    min-height: 100vh;
    // background: #F2F2F5;
    background: #FFFFFF;
    .form_wrapper{
        padding: .3rem .17279rem .6rem;
        // background-image: url('');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: top;
        background-attachment: fixed;
        .form_name{
            text-align: center;
            font-size: .44rem;
            font-weight: bold;
        }
        .form_describe{
            margin-top: .2rem;
            font-size: .36rem;
            line-height: 1.5;
        }
        .form_content{
            .horizontal{
                .horizontal_form_item{
                    padding: .17279rem 0;
                    .form_item_box{
                        display: flex;
                        align-items: center;
                        p{
                            font-size: .36rem;
                            color: #484848!important;
                            font-weight: bold;
                            width: 44%;
                            text-align: right;
                            box-sizing: border-box;
                            padding-right: .2rem;
                            .require_tips{
                                color: #ff6d56;
                                margin-left: .096rem;
                                font-size: .2304rem;
                                vertical-align: baseline;
                            }
                        }
                        .input_item{
                            position: relative;
                            box-sizing: border-box;
                            border-radius: .0768rem;
                            background-color: #fff;
                            // padding: 0 .2rem;
                            border: 1px solid #dde5ed;
                            margin-top: .2rem;
                            font-size: .36rem;
                            display: flex;
                            justify-content: space-between;
                            position: relative;

                            width: 70%;
                            .arrow-down{
                                position: absolute;
                                right: .2rem;
                                top: .2rem;
                            }
                            input:disabled{
                                background: none;
                            }
                            &.before_span{
                                padding-top: .17279rem;
                                padding-bottom: .17279rem;
                                padding-left: .3rem;
                            }
                            &.after_span{
                                padding-top: .17279rem;
                                padding-bottom: .17279rem;
                                padding-right: .3rem;
                            }
                            // &.padding_box{
                            //     padding-right: .3rem;
                            //     padding-left: .3rem;
                            // }
                            span{
                                padding: .17279rem .2rem;
                                background-color: #fafafa;
                                color: rgba(0,0,0,.65);
                            }
                            .input_box{
                                font-size: .36rem;
                                border: none;
                                -webkit-tap-highlight-color: rgba(0,0,0,0);
                                &.padding_box{
                                    padding-right: .3rem;
                                    padding-left: .3rem;
                                }
                            }
                        }
                        .textarea_item{
                            position: relative;
                            box-sizing: border-box;
                            border-radius: .0768rem;
                            background-color: #fff;
                            border: 1px solid #dde5ed;
                            margin-top: .2rem;
                            font-size: .36rem;
                            padding: .17279rem .3rem;
                            width: 70%;
                            .textarea_box{
                                font-size: .36rem;
                                border: none;
                                -webkit-tap-highlight-color: rgba(0,0,0,0);
                            }
                        }
                        .checkbox_item,.radio_item,.switch_item{
                            margin-top: .2rem;
                            font-size: .36rem;
                            padding: .17279rem .3rem;
                            width: 70%;
                        }
                        
                    }
                    .button_item{
                            margin-top: .2rem;
                            font-size: .36rem;
                            border-radius: .4rem;
                            background: #dcdfe6;
                            width: 100%;
                            height: .8rem;
                            text-align: center;
                            line-height: .8rem;
                            
                            &.primary{
                                background-color: #409eff;
                                border-color: #409eff;
                                color: #fff;
                            }
                            &.default{
                                background: #fff;
                                border: 1px solid #dcdfe6;
                            }
                            &.dashed{
                                background: #fff;
                                border: 1px solid #dcdfe6;
                                border-style: dotted;
                            }
                            &.danger{
                                background-color: #f56c6c;
                                border-color: #f56c6c;
                                color: #fff;
                            }
                        }
                        .alert_item{
                            position: relative;
                            box-sizing: border-box;
                            border-radius: .0768rem;
                            background-color: #fff;
                            border: 1px solid #dde5ed;
                            margin-top: .2rem;
                            padding: .17279rem .3rem;
                            font-size: .36rem;
                            &.success{
                                border: 1px solid #67C23A;
                                background-color: #f0f9eb;
                            }
                            &.warning{
                                border: 1px solid #E6A23C;
                                background-color: #fdf6ec;
                            }
                            &.error{
                                border: 1px solid #F56C6C;
                                background-color: #fef0f0;
                            }
                            &.info{
                                border: 1px solid #909399;
                                background-color: #f4f4f5;
                            }
                        }
                    .validator_info{
                        font-size: .26rem;
                        margin: .1rem;
                        color: #ef6262;
                        box-sizing: border-box;
                        padding-left: 40%;
                        display: none;
                    }
                }
            }
            .vertical{
                .vertical_form_item{
                    padding: .17279rem 0;
                    p{
                        font-size: .36rem;
                        color: #484848!important;
                        font-weight: bold;
                        .require_tips{
                            color: #ff6d56;
                            margin-left: .096rem;
                            font-size: .2304rem;
                            vertical-align: baseline;
                        }
                    }
                    .input_item{
                        position: relative;
                        box-sizing: border-box;
                        border-radius: .0768rem;
                        background-color: #fff;
                        // padding: 0 .2rem;
                        border: 1px solid #dde5ed;
                        margin-top: .2rem;
                        font-size: .36rem;
                        display: flex;
                        justify-content: space-between;
                        position: relative;
                        .arrow-down{
                            position: absolute;
                            right: .2rem;
                            top: .2rem;
                        }
                        input:disabled{
                            background: none;
                        }
                        &.before_span{
                            padding-top: .17279rem;
                            padding-bottom: .17279rem;
                            padding-left: .3rem;
                        }
                        &.after_span{
                            padding-top: .17279rem;
                            padding-bottom: .17279rem;
                            padding-right: .3rem;
                        }
                        span{
                            padding: .17279rem .2rem;
                            background-color: #fafafa;
                            color: rgba(0,0,0,.65);
                        }
                        .input_box{
                            font-size: .36rem;
                            border: none;
                            -webkit-tap-highlight-color: rgba(0,0,0,0);
                        }
                    }
                    .textarea_item{
                        position: relative;
                        box-sizing: border-box;
                        border-radius: .0768rem;
                        background-color: #fff;
                        border: 1px solid #dde5ed;
                        margin-top: .2rem;
                        font-size: .36rem;
                        padding: .17279rem .3rem;
                        .textarea_box{
                            font-size: .36rem;
                            border: none;
                            -webkit-tap-highlight-color: rgba(0,0,0,0);
                        }
                    }
                    .checkbox_item,.radio_item,.switch_item{
                        margin-top: .2rem;
                        font-size: .36rem;
                        padding: .17279rem .3rem;
                    }
                    .button_item{
                        margin-top: .2rem;
                        font-size: .36rem;
                        border-radius: .4rem;
                        background: #dcdfe6;
                        width: 100%;
                        height: .8rem;
                        text-align: center;
                        line-height: .8rem;
                        
                        &.primary{
                            background-color: #409eff;
                            border-color: #409eff;
                            color: #fff;
                        }
                        &.default{
                            background: #fff;
                            border: 1px solid #dcdfe6;
                        }
                        &.dashed{
                            background: #fff;
                            border: 1px solid #dcdfe6;
                            border-style: dotted;
                        }
                        &.danger{
                            background-color: #f56c6c;
                            border-color: #f56c6c;
                            color: #fff;
                        }
                    }
                    .alert_item{
                        position: relative;
                        box-sizing: border-box;
                        border-radius: .0768rem;
                        background-color: #fff;
                        border: 1px solid #dde5ed;
                        margin-top: .2rem;
                        padding: .17279rem .3rem;
                        font-size: .36rem;
                        &.success{
                            border: 1px solid #67C23A;
                            background-color: #f0f9eb;
                        }
                        &.warning{
                            border: 1px solid #E6A23C;
                            background-color: #fdf6ec;
                        }
                        &.error{
                            border: 1px solid #F56C6C;
                            background-color: #fef0f0;
                        }
                        &.info{
                            border: 1px solid #909399;
                            background-color: #f4f4f5;
                        }
                    }
                    .text_item{

                    }
                    .validator_info{
                        font-size: .26rem;
                        margin: .1rem;
                        color: #ef6262;
                        display: none;
                    }
                }
            }
        }
        .form_empty{}
    }
    .success_box{
        width: 7.2rem;
        box-sizing: border-box;
        padding: 1rem 0;
        text-align: center;
        &>p{
            line-height: .7rem;
            font-size: .3456rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
    }
}
</style>

